<template>
    <el-card class="push-item-box-card" :class="type">
        <div slot="header" class="clearfix">
            <span>{{push.message}}</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="remove">我知道了</el-button>
        </div>
        <div class="push-item-content item">
            <div class="push-item-nav center-flex-box">
                <el-button type="text" v-if="push.type===0" @click="goToPost">前往帖子</el-button>
                <el-button type="text" v-else-if="push.type===1" @click="viewReply">查看评论</el-button>
            </div>
            <div class="push-item-date center-flex-box">
                <span class="push-date">
                    推送时间
                    <br>
                    {{convertTime(push.pushDate)}}
                </span>
            </div>
            <simple-user-info-right class="simple-user-info center-flex-box"
                                    :user-info="push.responder"></simple-user-info-right>
        </div>
    </el-card>
</template>

<script>
    import SimpleUserInfoRight from '@/components/user/SimpleUserInfoRight'
    import dateUtil from 'element-ui/src/utils/date'
    import { type } from '@/constant'
    import { mapActions } from 'vuex'

    export default {
        name: 'pushItem',
        components: {
            SimpleUserInfoRight
        },
        props: {
            push: {
                type: Object,
                required: true
            }
        },
        data () {
            return {
                type: null
            }
        },
        mounted () {
            this.type = type[Math.floor(Math.random() * type.length)]
        },
        methods: {
            ...mapActions({
                getPostByIdAction: 'post/getById'
            }),
            convertTime (date) {
                return dateUtil.format(dateUtil.parse(date, 'yyyy-MM-dd HH:mm:ss').getTime(), 'yyyy-MM-dd HH:mm:ss')
            },
            goToPost () {
                this.action(this.getPostByIdAction(this.push.responseId), data => {
                    let post = data.data
                    this.$router.push(`/area/${post.area}/${post.id}`)
                })
            },
            viewReply () {
                this.$router.push(`push/${this.push.responseId}`)
            },
            remove () {
                this.$emit('remove')
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../../../style/scss';

    .push-item-box-card {
        margin-bottom: 32px;

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .push-item-content {
            width: 100%;
            height: 80px;

            .push-item-nav {
                width: 30%;
                height: 100%;
            }

            .push-item-date {
                width: 40%;
                height: 100%;

                .last-reply-time {
                    display: inline-block;
                    font-size: 12px;
                    width: 100%;
                    text-align: center;
                }
            }

            .simple-user-info {
                /*vertical-align: top;*/
                /*display: -webkit-inline-flex;*/
                /*justify-content: center;*/
                /*align-items: center;*/
                height: 100%;
                width: 30%;
            }
        }
    }
</style>
